<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" class="mt-10">
                <el-form-item label="三方平台">
                    <el-select v-model="search.channel" clearable class="filter-item" placeholder="推广渠道" style="width: 160px;">
                        <el-option
                            v-for="(item, index) in options.channels"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应用包名">
                    <el-input class="filter-item" clearable v-model="search.package" placeholder="应用包名"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initData">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="warning" @click="batch" plain>快速添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style="width: 1200px;">
            <vxe-table
                v-loading="loading"
                ref="xTable"
                :data="tableData"
                style="width: 100%"
                class="text-center"
                @checkbox-all="selectChangeEvent"
                @checkbox-change="selectChangeEvent">
                <vxe-table-column type="checkbox" width="40" fixed="left"/>
                <vxe-table-column title="应用包名" field="package"/>
                <vxe-table-column title="三方平台" field="channel" width="150">
                    <template #default="{row}">
                        <el-tag>{{ options.channels[row.channel].label }}</el-tag>
                    </template>
                </vxe-table-column>
                <vxe-table-column title="三方APPID" field="appid"/>
                <vxe-table-column title="备注" field="remark"/>
                <vxe-table-column title="操 作" width="150px">
                    <template #default="{row}">
                        <el-button
                            type="primary"
                            @click="edit(row)">
                            编辑
                        </el-button>
                        <destroy-confirm
                            route="appAppid/Destroy"
                            :primary="row.id"
                            @success="handleSearch">
                        </destroy-confirm>
                    </template>
                </vxe-table-column>
            </vxe-table>

            <div class="mt-10 pull-left">
                <destroy-multiple
                    route="appAppid/DestroyMultiple"
                    :selected="selected"
                    @success="handleSearch">
                    <el-button type="danger"  plain>删除选中</el-button>
                </destroy-multiple>
            </div>

            <el-pagination
                class="pull-right"
                background
                :current-page.sync="pageNo"
                :page-sizes="pageOptions.pageSizesList"
                :page-size="pageSize"
                :layout="pageOptions.layout"
                :total="totalDataNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <el-dialog
            :title="form.data && form.data.id ? '编辑' : '添加'"
            :visible.sync="form.show"
            width="30%"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <dialog-form
                :data="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

        <el-dialog
            :title="formBatch.data && formBatch.data.id ? '编辑' : '添加'"
            :visible.sync="formBatch.show"
            width="30%"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <dialog-form-batch
                v-if="formBatch.show"
                :data="formBatch.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="formBatch.show = false">
            </dialog-form-batch>
        </el-dialog>

    </div>
</template>

<script>
import dialogForm from './form'
import dialogFormBatch from './form-batch.vue'

export default {
    name: 'index',
    components: {
        dialogForm,
        dialogFormBatch,
    },
    data() {
        return {
            search: {
                source: '',
                channel: '',
                package: '',
                appid: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            pageOptions: this.$store.state.backend.pageOptions,
            totalDataNumber: 0,
            options: this.$store.state.appAppid.options,
            form: {
                data: {},
                show: false,
            },
            formBatch: {
                data: {},
                show: false,
            },
        }
    },
    methods: {
        selectChangeEvent ({ checked, records }) {
            this.selected = records.map(v => v.id);
            // console.log(checked ? '勾选事件' : '取消事件', records)
        },
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('appAppid/Lists', filter).then(res => {
                this.tableData = res.data.data;
                this.totalDataNumber = res.data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.pageNo = 1;
            this.handleSearch();
        },
        create() {
            this.form.data = {};
            this.form.show = true;
        },
        batch() {
            this.formBatch.data = {};
            this.formBatch.show = true;
        },
        edit(row) {
            this.form.data = row;
            this.form.show = true;
        },
        onFormSubmit() {
            this.form.show = false;
            this.formBatch.show = false;
            this.handleSearch();
        },
        onDestroy() {

        }
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>
